<template>
  <div id="PhysicalStatistics">

    <div class="banner">
      <p>
        <span>首页</span>
        <span> / </span>
        <span>数据统计</span>
        <span> / </span>
        <span class="title">用户统计</span>
      </p><br>
      <p class="header">体检统计</p>
    </div>

    <div class="bx">
      <div class="package">
        <h3>各套餐销量及收入分布{{total}}</h3>
        <div class="button">
          <span v-for="(item,index) in timedate" :key="index" @click="change(index)" :class="currentIndex === index ? 'active':''" >{{item}}</span>
        </div>
        <div id="packagei" ></div>
        <div id="hospitalIncome" ref="hospitalIncome">
          <el-table :data="packagelist.list" style="width: 70%;margin-left: 100px;" :cell-style="{'text-align':'center'}">
            <el-table-column prop="p1" label="复工复产套餐"  header-align="center"/>
            <el-table-column prop="p2" label="入职体检男"  header-align="center"/>
            <el-table-column prop="p3" label="入职体检女" header-align="center"/>
            <el-table-column prop="p4" label="公务员体检" header-align="center"/>
            <el-table-column prop="p5" label="健康体检" header-align="center"/>
          </el-table>
        </div>

      </div>

      <div class="PackageSales">
        <h3>各地区体检套餐销售</h3>
        <div id="PSales" ref="PSales"></div>
        <div id="PSales2" ref="PSales2"></div>

      </div>

    </div>


  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { reactive, ref } from "@vue/reactivity";
import { computed, onMounted } from "@vue/runtime-core";
import axios from "axios";

var timedate=ref(["本月","本季度","本年"])
var currentIndex=ref(0);
var packagelist=ref({list:[]})
var locallist=ref({list:[]})

function packagei () {
	let newPromise = new Promise((resolve) => {
		resolve()
	})
    newPromise.then(() => {
      if (packageChart != null && packageChart != "" && packageChart != undefined) {
        packageChart.dispose();//销毁
      }else{
      if(currentIndex.value==0){
        var packageChart=echarts.init(document.getElementById('packagei'));  
        packageChart.setOption({
          title: {
            text: '套餐销量分布',
            left: 'center',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              label:{
                  show:true,
                  position:'inner',
                  formatter:'{d}%'
              },
              data: [
                { value: packagelist.value.list[0].p1, name: '复工复产套餐', },
                { value: packagelist.value.list[0].p2, name: '入职体检男' },
                { value: packagelist.value.list[0].p3, name: '入职体检女' },
                { value: packagelist.value.list[0].p4, name: '公务员体检' },
                { value: packagelist.value.list[0].p5, name: '健康体检' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
      }else if(currentIndex.value==1){
        var packageChart=echarts.init(document.getElementById('packagei'));  
        packageChart.setOption({
          title: {
            text: '套餐销量分布',
            left: 'center',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              label:{
                  show:true,
                  position:'inner',
                  formatter:'{d}%'
              },
              data: [
                { value: packagelist.value.list[1].p1, name: '复工复产套餐', },
                { value: packagelist.value.list[1].p2, name: '入职体检男' },
                { value: packagelist.value.list[1].p3, name: '入职体检女' },
                { value: packagelist.value.list[1].p4, name: '公务员体检' },
                { value: packagelist.value.list[1].p5, name: '健康体检' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
      }else{
        var packageChart=echarts.init(document.getElementById('packagei'));  
        packageChart.setOption({
          title: {
            text: '套餐销量分布',
            left: 'center',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              label:{
                  show:true,
                  position:'inner',
                  formatter:'{d}%'
              },
              data: [
                { value: packagelist.value.list[2].p1, name: '复工复产套餐', },
                { value: packagelist.value.list[2].p2, name: '入职体检男' },
                { value: packagelist.value.list[2].p3, name: '入职体检女' },
                { value: packagelist.value.list[2].p4, name: '公务员体检' },
                { value: packagelist.value.list[2].p5, name: '健康体检' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
      }
    };
  })
}

function Psales(){
  let newPromise = new Promise((resolve)=>{
    resolve()
  })
  newPromise.then(()=>{
    if (incomeChart != null && incomeChart != "" && incomeChart != undefined) {
      incomeChart.dispose();//销毁
    }else{
      var incomeChart=echarts.init(document.getElementById('PSales'));  
      incomeChart.setOption({
        title: {
    text: '各地区体检套餐销售',
    left: 'center',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['北京', '上海', '天津', '重庆', '广东', '安徽','福建', '江苏', '浙江', '山东', '湖北', '湖南', '江西', '广西', '海南']
  },
  series: [
    {
      type: 'bar',
      data: [locallist.value.list[0].r1, locallist.value.list[1].r1,locallist.value.list[2].r1,locallist.value.list[9].r1,locallist.value.list[3].r1,locallist.value.list[10].r1,locallist.value.list[4].r1,locallist.value.list[11].r1,locallist.value.list[5].r1,locallist.value.list[12].r1,locallist.value.list[6].r1,locallist.value.list[13].r1,locallist.value.list[7].r1,locallist.value.list[14].r1,locallist.value.list[8].r1,]
    }
  ]
      });
    }
  })
}

function Psales2(){
  let newPromise = new Promise((resolve)=>{
    resolve()
  })
  newPromise.then(()=>{
    if (incomeChart != null && incomeChart != "" && incomeChart != undefined) {
      incomeChart.dispose();//销毁
    }else{
      var incomeChart=echarts.init(document.getElementById('PSales2'));  
      incomeChart.setOption({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['河北', '河南', '陕西', '山西', '四川', '云南','贵州', '辽宁', '吉林', '黑龙江', '新疆', '西藏', '海南', '宁夏', '内蒙古']
  },
  series: [
    {
      type: 'bar',
      data: [locallist.value.list[0].r1, locallist.value.list[1].r2,locallist.value.list[2].r2,locallist.value.list[9].r2,locallist.value.list[3].r2,locallist.value.list[10].r2,locallist.value.list[4].r2,locallist.value.list[11].r2,locallist.value.list[5].r2,locallist.value.list[12].r2,locallist.value.list[6].r2,locallist.value.list[13].r2,locallist.value.list[7].r2,locallist.value.list[14].r2,locallist.value.list[8].r2,]
    }
  ]
      });
    }
  })
}

onMounted(()=>{
  axios.get('/api/package/list').then((res)=>{
    packagelist.value.list=res.data.list;
    packagei();
  });
  axios.get('/api/region/list').then((res)=>{
    locallist.value.list=res.data.list;
    Psales();
    Psales2();
  })
  
})

var total=computed(()=>{
  var sum=0
  for(let i;i<packagelist.value.list.length;i++){
    sum += packagelist.value.list[1].p1;
  }
  return sum;
})

var change=(index)=>{
  currentIndex.value=index;
  packagei();
}

</script>

<style scoped>
.banner{
  height: 80px;
  width: 100%;
  background-color: #fff;
  margin-bottom: 40px;
  position: absolute;
  top:61px;
  left: 15%;
  padding-top: 20px;
  z-index: 999;
}
.banner p{
  font-size: 12px;
  color: #AAA;
}
.banner .title{
  color: #000;
}
.banner .header{
  font-size: 18px;
  font-weight: 600;
  color: #000;
}

#PhysicalStatistics .bx{
  width: 800px;
  /* height: 500px; */
  margin: auto;
  margin-top: 120px;
  /* background: #fff; */
  overflow: hidden;
}
#PhysicalStatistics .bx .button{
  margin: 20px 0 0 20px;
  border-radius: 5px;
  border: 1px solid blue;
  width: 280px;
  display: flex;
  justify-content: space-between;
  text-align: center;

}
#PhysicalStatistics .bx .button span{
  font-size: 12px;
  display: inline-block;
  width: 100px;
  height: 25px;
  line-height:25px;
  color: blue;
  cursor: pointer;
  /* border: 1px solid blue; */
}
#PhysicalStatistics .bx .package{
  margin-bottom: 40px;
  background: white;
  overflow: hidden;

}
#PhysicalStatistics .bx .package .button span.active{
  background: blue;
  color: white;
}
#PhysicalStatistics .bx .package #packagei{
  width: 100%;
  height: 350px;
}
h3{
  margin: 10px 0 10px 24px;
}

#PhysicalStatistics .bx .PackageSales{
  margin-bottom: 40px;
  background: white;
  overflow: hidden;

}
#PhysicalStatistics .bx .PackageSales #PSales{
  width: 100%;
  height: 350px;
}
#PhysicalStatistics .bx .PackageSales #PSales2{
  width: 100%;
  height: 350px;
}
</style>